<template>
	<view class="container" :style="{ backgroundImage: `url('${vdata.businessInfo.groupImg}')` }">
		<!-- <view :style="{ 'height': navData.navbarHeight + navData.statusBarHeight + 'px' }"></view>
		<view class="nav" :style="{ backgroundImage: `url('${vdata.businessInfo.groupImg}')` }">
			<view :style="{ 'height': navData.statusBarHeight + 'px' }"></view>
			<view
				:style="{ 'height': navData.navbarHeight + 'px', 'color': '#fff', 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'center' }">
				<image @tap="back" src="@/static/new/user/arrow-left.png"
					style="width: 22rpx;height: 36rpx;position: absolute; left: 44rpx;"></image>
				<text>商圈详情</text>
			</view>
		</view> -->

		<!-- 商圈信息卡 -->
		<view class="business-card">
			<view class="top">
				<view class="left">
					<text>{{ vdata.businessInfo.groupName }}</text>
					<text>辐射范围：{{ vdata.businessInfo.radius }}米</text>
				</view>
				<view class="right">
					<image src="@/static/new/businessCircle/icon-big-collect.png" />
					<text>收藏</text>
				</view>
			</view>
			<view class="bottom">
				<view>
					<image src="@/static/new/businessCircle/icon-black-location.png"></image>
					<text>{{ vdata.businessInfo.address }}</text>
				</view>
				<view>{{ vdata.businessInfo.groupDes }}</view>
			</view>
		</view>

		<!-- 商户列表 活动列表 分段器 -->
		<uni-segmented-control :current="segmentedControl.current" :values="segmentedControl.items" @clickItem="onClickItem" styleType="text" activeColor="#24C789"></uni-segmented-control>

		<!-- 搜索栏 -->
		<view class="search-wrap">
			<view class="left">
				<image class="icon-search" src="@/static/new/businessCircle/icon-search.png"></image>
				<input type="text" placeholder="请输入关键词进行搜索" placeholder-style="font-size: 24rpx;color: #bbb">
			</view>
			<text class="right">搜索</text>
		</view>

		<!-- 商家列表 -->
		<view v-if="segmentedControl.current === 0" class="list">
			<view class="item" v-for="item in useDataResult.dataList" @tap="toViewInfo(item)">
				<view class="left">
					<image :src="'https://img.ixintu.com/download/jpg/20200810/a3e3cebab6666fd97c51386d02643fc5_512_512.jpg%21ys'">
					</image>
					<view class="desc">
						<view class="tle">{{ item.mchName }}</view>
						<!-- <view class="dis">距离{{ (Number(item.distance) / 1000).toFixed(1) }}km</view> -->
						<view class="dis">{{ tool.filterDistance(item.distance) }}</view>
						<view class="addr">
							<image src="@/static/new/businessCircle/location.png"></image>
							<text class="text">{{ item.address }}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<image class="collect" src="@/static/new/businessCircle/collect.png"></image>
					<image v-if="!item.lat || !item.lng" @tap="navigation(item)" class="mch-nav" src="@/static/new/businessCircle/nav.png"></image>
					<image v-else @tap="navigation(item)" class="mch-nav" src="@/static/new/businessCircle/nav.png"></image>
				</view>
			</view>
			<!-- <gzListNull :list="useDataResult.dataList"></gzListNull> -->
		</view>
		<!-- 活动列表 -->
		<view v-else class="activity-list">
			<view class="activity-item" @tap="toUrl(`/pageUser/myActivity/detail?activityId=${item.activityId}`)" v-for="item in useActivityDataResult.dataList">
				<image :src="item.activityImg"></image>
				<view class="desc">
					<view class="name">{{ item.activityName }}</view>
					<view class="date-wrap">
						<image src="@/static/new/businessCircle/icon-date.png"></image>
						<text>{{ dayjs(item.startTime).format('YYYY[年]MM[月]DD[日]') }}至{{ dayjs(item.endTime).format('YYYY[年]MM[月]DD[日]') }}</text>
					</view>
				</view>
			</view>
			<!-- <gzListNull :list="useActivityDataResult.dataList"></gzListNull> -->
		</view>
		<!-- <view class="list-tip-text" v-if="useDataResult.length != 0">{{ useDataResult.listTipText }}</view> -->
		<gzListNull :list="segmentedControl.current === 0 ? useDataResult.dataList : useActivityDataResult.dataList">
		</gzListNull>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="关闭" confirmText="确定" title="提示" content="您未绑定手机号,是否去绑定？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>

</template>

<script setup>
	import tool from '@/util/tool.js'
	import dayjs from 'dayjs'
	import { ref, reactive, getCurrentInstance } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { $mchList, $groupActivityList } from '@/http/apiManager.js'
	import useGetList from '@/hooks/useGetList.js'
	import appConfig from '../../config/appConfig';

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	// 商家列表
	const { useDataResult, getList } = useGetList($mchList, data => data, {}, false)
	// 活动列表
	const { useDataResult: useActivityDataResult, getList: getActivityList } = useGetList($groupActivityList, data => data, {}, false)
	const alertDialog = ref()
	const vdata = reactive({
		businessInfo: {}
	});
	// 分段器
	const segmentedControl = reactive({
		current: 0,
		items: ['商户列表', '活动列表']
	})
	const navData = reactive({
		statusBarHeight: getApp().globalData.statusBarHeight,
		navbarHeight: getApp().globalData.navbarHeight
	})

	// 商户，活动列表切换
	function onClickItem({ currentIndex }) {
		if (segmentedControl.current != currentIndex) {
			segmentedControl.current = currentIndex
		}
	}

	onLoad(options => {
		vdata.businessInfo = JSON.parse(options.groupInfo);
		// 请求商家列表
		getList({
			groupId: vdata.businessInfo.groupId,
			lat: vdata.businessInfo.lat,
			lng: vdata.businessInfo.lng,
		})
		// 请求商圈活动
		getActivityList({
			groupId: vdata.businessInfo.groupId,
			agentNo: appConfig.agentNo
		})
	});
	onShow(() => {

	});

	// 返回
	function back() {
		uni.navigateBack()
	}
	// 页面跳转
	function toUrl(url) {
		uni.navigateTo({
			url
		})
	}
	// 导航到商家
	function navigation({ lat, lng, mchName, address }) {
		if (!lat || !lng) {
			// #ifdef MP-YHDD
			$infoBox.toast('商户GPS数据缺失，无法导航！')
			// #endif
			// #ifndef MP-YHDD
			$infoBox.toast('非小邮付商户，暂无GPS数据！')
			// #endif
			return
		}
		uni.openLocation({
			latitude: Number(lat),
			longitude: Number(lng),
			name: mchName,
			address
		});
	}
	const dialogConfirm = () => {
		uni.navigateTo({
			url: '/pageUser/realName/index'
		});
	}
	const dialogClose = () => {
		// console.log('点击关闭')
	}

	const telPhone = (val) => {
		uni.makePhoneCall({
			// 手机号
			phoneNumber: val,
			// 成功回调
			success: (res) => {},
			// 失败回调
			fail: (res) => {}
		});
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 330rpx 32rpx 0;
		box-sizing: border-box;
		position: relative;
		background-color: #F7F8FB;
		background-size: 100% 600rpx;
		background-position: 0 0;
		background-repeat: no-repeat;

		.nav {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			background-size: 100% 600rpx;
			background-position: 0 0;
			background-repeat: no-repeat;
		}

		.business-card {
			margin: 0 0 28rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;

			.top {
				border-bottom: 1rpx solid #eee;
				padding-bottom: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					color: #333333;
					display: flex;
					flex-direction: column;

					text {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 36rpx;
						}

						&:nth-child(2) {
							font-weight: 400;
							font-size: 24rpx;
							margin-top: 28rpx;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					align-items: center;

					image {
						width: 36rpx;
						height: 34rpx;
					}

					text {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
					}
				}
			}

			.bottom {
				margin-top: 34rpx;

				view {
					&:nth-child(1) {
						display: flex;
						align-items: flex-start;
						gap: 10rpx;

						image {
							width: 22rpx;
							height: 24rpx;
							flex-shrink: 0;
							margin-top: 4px;
						}

						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: nowrap;
						}
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 22rpx;
						padding-left: 32rpx;
					}
				}
			}
		}

		// 搜索
		.search-wrap {
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 6rpx 6rpx 6rpx 30rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.icon-search {
					width: 28rpx;
					height: 28rpx;
				}

				input {
					font-size: 24rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 16rpx 26rpx;
				background: #24C789;
				border-radius: 35rpx;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-top: 30rpx;

			.item {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;

				.left {
					display: flex;

					image {
						width: 146rpx;
						height: 146rpx;
						margin-right: 18rpx;
						flex-shrink: 0;
						border-radius: 15rpx;
					}

					.desc {
						width: 390rpx;
						display: flex;
						flex-direction: column;
						gap: 25rpx;

						.tle {
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.dis {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.addr {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}

							.text {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					margin-left: 24rpx;
					flex-shrink: 0;

					image {
						&:nth-child(1) {
							width: 28rpx;
							height: 26rpx;
						}

						&:nth-child(2) {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			}
		}

		.activity-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-top: 30rpx;


			.activity-item {
				background: #fff;
				border-radius: 16rpx;

				image {
					width: 100%;
					height: 372rpx;
					border-radius: 16rpx 16rpx 0 0;
				}

				.desc {
					padding: 32rpx;

					.name {
						font-weight: bold;
						font-size: 34rpx;
						color: #333333;
					}

					.date-wrap {
						display: flex;
						align-items: center;
						gap: 12rpx;
						margin-top: 28rpx;

						image {
							width: 26rpx;
							height: 26rpx;
						}

						text {
							font-weight: 400;
							font-size: 26rpx;
							color: #A0A9C0;
						}
					}
				}
			}
		}

	}
</style>